<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<link rel="stylesheet" href="css/default.css">
<title>調整さん γ</title>
<script type="text/javascript"><!--
function changeDispAttendance() {
	var div = document.getElementById("attendanceForm");
	div.style.display = (div.style.display == "none") ? "block" : "none";
	var btn = document.getElementById("attendanceButton");
	btn.style.display = (btn.style.display == "none") ? "block" : "none";
}
// -->
</script>
</head>
<body>
<div id="header">
	<a id="choseisan" href="/"><h2>調整さん γ（ガンマ）</h2></a>
</div>
<div id="content">
	<h3>村長の持病のくすりを町まで取りにいく</h3>
	<hr/>
	<h5 class="item">イベント説明</h5>
	<p>
		道中のモンスターに気をつけてください。<br/>
		バブルスライムが出るので毒消し草が必須です。<br/>
	</p>
	<h5 class="item">日程</h5>
	<span style="color:#666666;font-size:0.8em">
		※各自の出欠状況を変更するには名前のリンクをクリックしてください
	</span>
	<table class="schedule">
		<tr>
			<th>日程</th>
			<td><a href="#">村人A</a></td>
			<td><a href="#">村人B</a></td>
			<td><a href="#">戦士A</a></td>
		</tr>
		<tr>
			<th>8/7(月) 20:00～</th>
			<td>△</td>
			<td>○</td>
			<td>△</td>
		</tr>
		<tr>
			<th>8/8(火) 20:00～</th>
			<td>○</td>
			<td>○</td>
			<td>×</td>
		</tr>
		<tr>
			<th>8/9(水) 21:00～</th>
			<td>○</td>
			<td>×</td>
			<td>×</td>
		</tr>
		<tr>
			<th>行きたくない</th>
			<td>×</td>
			<td>×</td>
			<td>○</td>
		</tr>
	</table>
	<br/>
	<input type="button" id="attendanceButton" value="出欠を新規登録"
	 onclick="javascript:changeDispAttendance();" />
	<div id="attendanceForm" style="display:none;">
	<!--出欠新規登録 -->
	<h3>出欠を新規登録</h3>
	<hr/>
	<form>
		<h5 class="item">名前</h5>
		<p>
			<input type="text" size="50"/><br/>
		</p>
		<h5 class="item">日程</h5>
		<table style="margin:10px;">
			<tr>
				<td>8/7(月) 20:00～</td>
				<td>
					<select>
						<option>○</option>
						<option>△</option>
						<option selected="selected">×</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>8/8(火) 20:00～</td>
				<td>
					<select>
						<option>○</option>
						<option>△</option>
						<option selected="selected">×</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>8/9(水) 21:00～</td>
				<td>
					<select>
						<option>○</option>
						<option>△</option>
						<option selected="selected">×</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>行きたくない</td>
				<td>
					<select>
						<option>○</option>
						<option>△</option>
						<option selected="selected">×</option>
					</select>
				</td>
			</tr>
		</table>
		<h5 class="item">コメント</h5>
		<p style="color:#666666;font-size:0.8em">
			個人が特定し得る内容は入力しないでください<br/>
			<input type="text" size="50"/>
		</p>
		<input type="button" value="更新"
		 onclick="javascript:alert('更新したイメージで。');changeDispAttendance();"/>
	</form>
	</div>
	<p style="color:#666666;font-size:0.8em">
		※注意：一ヶ月誰も更新しなかったイベントは自動的に削除されます。<br/>
		※イベント再編集は、イベント新規作成したパソコン・ブラウザでのみ可能です。
	</p>
</div>
<div id="footer">
	choseisan
</div>
</body>
</html>